<template>
    <div class="flex items-center h-12 px-4 space-x-3 ">
        <div class="flex items-center h-full shrink-0">
            <slot name="left">
                <div v-if="left" class="grid w-8 h-8 text-xs text-white place-content-center">
                    <Auth v-if="left == 'auth'">
                        <template #default="{ logout, user }">
                            <div @click="logout">
                                <img :src="(user as any).avatar" class="w-full h-full rounded-full" />
                            </div>
                        </template>
                        <template #unauth="{ login }">
                            <div class="w-8 h-8 grid place-content-center rounded-full bg-gray-300" @click="login">登陆</div>
                        </template>
                    </Auth>
                    <Back class="text-gray-400 " v-if="left == 'back'" />
                </div>
            </slot>
        </div>
        <div class="flex items-center justify-center h-full grow">
            <slot>
                <div v-if="search"
                    class="flex items-center w-full px-2 py-1 border rounded-full search bg-white/20 text-gray-50 "
                    @click="goSearch">
                    <IRiSearch2Line class="text-gray-400 search-icon" />
                    <div class="ml-2 text-xs text-gray-100 search-text">
                        {{ searchPlaceholder }}
                    </div>
                </div>
            </slot>
        </div>
        <div class="flex items-center h-full shrink-0">
            <slot name="right">
                <div class="grid h-full place-content-center" v-if="right">
                    <IIonNotificationsOutline class="text-white search-icon" />
                </div>
            </slot>
        </div>
    </div>
</template>
    
<script setup lang='ts'>
import { RouteLocationRaw } from 'vue-router';
const { push } = useRouter()
const $props = withDefaults(
    defineProps<{
        left?: boolean | 'auth' | 'back';
        right?: boolean,
        search?: boolean,
        searchTo?: RouteLocationRaw,
        searchPlaceholder?: string
    }>(),
    {
        left: 'auth',
        search: true,
        right: true,
        searchPlaceholder: '请输入要搜索内容'
    }
)
const $emits = defineEmits(['search']);
const goSearch = () => {
    if ($props.searchTo) {
        push($props.searchTo)
        return;
    }
    $emits('search')
}
</script>
    
<style></style>